<template>
  <view class="page">
    <!-- 时间筛选 -->
    <view class="time-tabs">
      <view 
        class="time-tab" 
        v-for="(tab, index) in timeTabs" 
        :key="index"
        :class="{ active: activeTimeTab === index }"
        @click="switchTimeTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 核心数据卡片 -->
    <view class="overview-section">
      <view class="section-title">🎉 零食模块统计</view>
      <view class="stats-cards">
        <view class="stat-card">
          <text class="stat-value">¥{{ stats.totalSales }}</text>
          <text class="stat-label">总销售额</text>
          <text class="stat-trend up">+{{ stats.salesGrowth }}%</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ stats.totalOrders }}</text>
          <text class="stat-label">订单数量</text>
          <text class="stat-trend up">+{{ stats.ordersGrowth }}%</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ stats.totalUsers }}</text>
          <text class="stat-label">购买用户</text>
          <text class="stat-trend">{{ stats.usersGrowth }}%</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">¥{{ stats.avgPrice }}</text>
          <text class="stat-label">客单价</text>
          <text class="stat-trend up">+{{ stats.avgPriceGrowth }}%</text>
        </view>
      </view>
    </view>

    <!-- 销售趋势图 -->
    <!-- <view class="chart-section">
      <view class="section-title">📈 销售趋势</view>
      <view class="chart-placeholder">
        <text class="placeholder-text">图表区域（需引入echarts）</text>
        <text class="placeholder-desc">折线图展示每日销售额和订单量</text>
      </view>
    </view> -->

    <!-- 热销商品 -->
    <view class="hot-products-section">
      <view class="section-title">🔥 热销商品 TOP10</view>
      <view class="product-list">
        <view class="product-item" v-for="(product, index) in hotProducts" :key="product.id">
          <view class="product-rank" :class="{ top3: index < 3 }">
            {{ index + 1 }}
          </view>
          <image 
            class="product-image" 
            :src="product.image || '/static/images/product-default.png'"
            mode="aspectFill"
          ></image>
          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <view class="product-data">
              <text class="data-item">销量: {{ product.sales }}</text>
              <text class="data-item">¥{{ product.price }}</text>
            </view>
          </view>
          <view class="product-amount">
            <text class="amount-label">销售额</text>
            <text class="amount-value">¥{{ product.totalAmount }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 退款与补偿统计 -->
    <view class="refund-stats-section">
      <view class="section-title">♻️ 退款与补偿统计</view>
      <view class="refund-stats-grid">
        <view class="refund-stat-item">
          <text class="stat-count">{{ refundStats.refundedOrders }}</text>
          <text class="stat-name">已退款订单</text>
        </view>
        <view class="refund-stat-item">
          <text class="stat-count amount">¥{{ refundStats.refundTotalAmount }}</text>
          <text class="stat-name">退款总金额</text>
        </view>
        <view class="refund-stat-item">
          <text class="stat-count">{{ refundStats.refundCompOrders }}</text>
          <text class="stat-name">有补偿订单</text>
        </view>
        <view class="refund-stat-item">
          <text class="stat-count amount">¥{{ refundStats.compensationTotal }}</text>
          <text class="stat-name">补偿总额</text>
        </view>
        <view class="refund-stat-item">
          <text class="stat-count amount">¥{{ refundStats.compensationPending }}</text>
          <text class="stat-name">补偿结算中</text>
        </view>
        <view class="refund-stat-item">
          <text class="stat-count amount">¥{{ refundStats.compensationSettled }}</text>
          <text class="stat-name">补偿已结算</text>
        </view>
      </view>
    </view>

    <!-- 订单统计 -->
    <view class="order-stats-section">
      <view class="section-title">📊 订单统计</view>
      <view class="order-stats-grid">
        <view class="order-stat-item">
          <text class="stat-count">{{ orderStats.pending }}</text>
          <text class="stat-name">待接单</text>
        </view>
        <view class="order-stat-item">
          <text class="stat-count">{{ orderStats.delivering }}</text>
          <text class="stat-name">配送中</text>
        </view>
        <view class="order-stat-item">
          <text class="stat-count">{{ orderStats.completed }}</text>
          <text class="stat-name">已完成</text>
        </view>
        <view class="order-stat-item">
          <text class="stat-count">{{ orderStats.cancelled }}</text>
          <text class="stat-name">已取消</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timeTabs: ['今日', '本周', '本月', '全部'],
      activeTimeTab: 0,
      stats: {
        totalSales: '0.00',
        totalOrders: 0,
        totalUsers: 0,
        avgPrice: '0.00',
        salesGrowth: 0,
        ordersGrowth: 0,
        usersGrowth: 0,
        avgPriceGrowth: 0
      },
      refundStats: {
        refundedOrders: 0,
        refundTotalAmount: '0.00',
        refundCompOrders: 0,
        compensationTotal: '0.00',
        compensationPending: '0.00',
        compensationSettled: '0.00'
      },
      hotProducts: [],
      orderStats: {
        pending: 0,
        delivering: 0,
        completed: 0,
        cancelled: 0
      }
    }
  },
  onLoad() {
    this.loadStats()
    this.loadHotProducts()
    this.loadOrderStats()
  },
  methods: {
    switchTimeTab(index) {
      this.activeTimeTab = index
      this.loadStats()
      this.loadHotProducts()
    },
    
    async loadStats() {
      try {
        const { getMerchantStats } = require('@/api/merchant')
        
        const timeRangeMap = ['today', 'week', 'month', 'all']
        const timeRange = timeRangeMap[this.activeTimeTab]
        
        const data = await getMerchantStats(timeRange)
        
        this.stats = {
          totalSales: data.totalSales || '0.00',
          totalOrders: data.totalOrders || 0,
          totalUsers: data.totalUsers || 0,
          avgPrice: data.avgPrice || '0.00',
          salesGrowth: 0, // 增长率需要对比上期数据，暂不实现
          ordersGrowth: 0,
          usersGrowth: 0,
          avgPriceGrowth: 0
        }

        // 退款与补偿统计
        this.refundStats = {
          refundedOrders: data.pickupRefundedOrders || 0,
          refundTotalAmount: data.pickupRefundTotalAmount || '0.00',
          refundCompOrders: data.pickupRefundCompensationOrders || 0,
          compensationTotal: data.pickupCompensationTotal || '0.00',
          compensationPending: data.pickupCompensationPendingSettlement || '0.00',
          compensationSettled: data.pickupCompensationSettledAmount || '0.00'
        }
      } catch (error) {
        console.error('加载统计数据失败:', error)
      }
    },
    
    async loadHotProducts() {
      try {
        const { getHotProducts } = require('@/api/merchant')
        
        const timeRangeMap = ['today', 'week', 'month', 'all']
        const timeRange = timeRangeMap[this.activeTimeTab]
        
        this.hotProducts = await getHotProducts(timeRange, 10)
      } catch (error) {
        console.error('加载热销商品失败:', error)
        this.hotProducts = []
      }
    },
    
    async loadOrderStats() {
      try {
        const { getMerchantStats } = require('@/api/merchant')
        
        const timeRangeMap = ['today', 'week', 'month', 'all']
        const timeRange = timeRangeMap[this.activeTimeTab]
        
        const data = await getMerchantStats(timeRange)
        
        this.orderStats = {
          pending: data.pendingOrders || 0,
          delivering: data.deliveringOrders || 0,
          completed: data.completedOrders || 0,
          cancelled: data.cancelledOrders || 0
        }
      } catch (error) {
        console.error('加载订单统计失败:', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 40rpx;
}

/* 时间筛选 */
.time-tabs {
  background: #fff;
  display: flex;
  padding: 20rpx 24rpx;
  gap: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.time-tab {
  flex: 1;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #666;
  transition: all 0.3s;
  
  &.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-weight: bold;
  }
}

/* 核心数据卡片 */
.overview-section {
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding: 20rpx;
}

.stat-card {
  background: #f5f7fa;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  position: relative;
  
  .stat-value {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
  }
  
  .stat-label {
    font-size: 24rpx;
    color: #999;
  }
  
  .stat-trend {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
    font-size: 22rpx;
    color: #999;
    
    &.up {
      color: #51cf66;
    }
    
    &.down {
      color: #ff6b6b;
    }
  }
}

/* 图表区域 */
.chart-section {
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
}

.chart-placeholder {
  height: 400rpx;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf6 100%);
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  
  .placeholder-text {
    font-size: 28rpx;
    color: #666;
  }
  
  .placeholder-desc {
    font-size: 24rpx;
    color: #999;
  }
}

/* 热销商品 */
.hot-products-section {
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.product-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx;
  background: #f5f7fa;
  border-radius: 12rpx;
}

.product-rank {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e0e0;
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
  border-radius: 8rpx;
  flex-shrink: 0;
  
  &.top3 {
    background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
  }
}

.product-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  background: #fff;
  flex-shrink: 0;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.product-name {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.product-data {
  display: flex;
  gap: 24rpx;
  
  .data-item {
    font-size: 22rpx;
    color: #999;
  }
}

.product-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4rpx;
  
  .amount-label {
    font-size: 20rpx;
    color: #999;
  }
  
  .amount-value {
    font-size: 26rpx;
    font-weight: bold;
    color: #ff6b6b;
  }
}

/* 退款与补偿统计 */
.refund-stats-section {
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

.refund-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.refund-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  padding: 24rpx 16rpx;
  background: #f5f7fa;
  border-radius: 12rpx;
}

.refund-stat-item .stat-count {
  font-size: 36rpx;
  font-weight: bold;
  color: #667eea;
}

.refund-stat-item .stat-count.amount {
  color: #ff6b6b;
}

.refund-stat-item .stat-name {
  font-size: 22rpx;
  color: #999;
}

/* 订单统计 */
.order-stats-section {
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}

.order-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.order-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  padding: 24rpx 16rpx;
  background: #f5f7fa;
  border-radius: 12rpx;
  
  .stat-count {
    font-size: 36rpx;
    font-weight: bold;
    color: #667eea;
  }
  
  .stat-name {
    font-size: 22rpx;
    color: #999;
  }
}
</style>

